<template>
    <router-view></router-view>
  <var-bottom-navigation v-model:active="active" fixed  border @change="handleChange">
    <var-bottom-navigation-item name="home" label="标签" icon="home" />
    <var-bottom-navigation-item name="search" label="标签" icon="magnify" />
    <var-bottom-navigation-item name="heart" label="标签" icon="heart" />
    <var-bottom-navigation-item name="wode" label="标签" icon="account-circle" />
  </var-bottom-navigation>
</template>
<script>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
    export default {
        setup(){
            const active = ref('home') //默认选中第一个
            const router = useRouter()
            // 点击事件
            const handleChange = (active)=>{
                console.log(router,'我笑死了')
                router.push({
                    name:active
                })
            }
            return {
                active,
                handleChange
            }
        }
    }
</script>